// 这个案例中有6处报错，改正后让代码正常完成更换背景图案例吧（刷新背景图也要在）
/**
 * 目标：网站-更换背景
 *  1. 选择图片上传，设置body背景
 *  2. 上传成功时，"保存"图片url网址
 *  3. 网页运行后，"获取"url网址使用
 * */
// 错误1：事件类型应该为 change
document.querySelector(".bg-ipt").addEventListener("change", (e) => {
  // 1. 选择图片上传，设置body背景
  // console.log(e.target.files[0]);
  const fd = new FormData();
  // 错误2：根据接口文档要求，参数名应该为 img
  fd.append("img", e.target.files[0]);
  axios({
    url: "http://hmajax.itheima.net/api/uploadimg",
    // 错误3：本案例请求方法应为 post
    method: "post",
    data: fd,
  }).then((result) => {
    const imgUrl = result.data.data.url;
    // 错误4：行内样式背景图片设置格式错误
    document.body.style.backgroundImage = `url(${imgUrl})`;

    // 2. 上传成功时，"保存"图片url网址
    localStorage.setItem("bgImg", imgUrl);
  });
});

// 3. 网页运行后，"获取"url网址使用
// 错误5.读取本地存储数据应该和存放数据时使用相同的数据名
const bgUrl = localStorage.getItem("bgImg");
console.log(bgUrl);
// 错误6.判断本地是否存在背景图数据，存在则展示，所以应该用逻辑与
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`);
